<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    const VERTEX_SHADER_SORUCE = `
    attribute vec4 aPosition;
    attribute float aPointSize;
    void main(){
      gl_Position = aPosition;
      gl_PointSize = aPointSize;
    }
  `;
    const FRAGEMNT_SHADER_SOURCE = `
    void main(){
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `;
    // 封装后
    const program = initShader(gl, VERTEX_SHADER_SORUCE, FRAGEMNT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, 'aPosition')
    const aPointSize = gl.getAttribLocation(program, 'aPointSize')
    // 顶点数据
    const points = new Float32Array([
        -0.5, -0.5,
        0.5, -0.5,
        0.0, 0.5
    ])
    const buffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, buffer)

    gl.bufferData(gl.ARRAY_BUFFER,points,gl.STATIC_DRAW)

    gl.vertexAttribPointer(aPosition,2,gl.FLOAT,false,0,0)
    // 激活aPosition
    gl.enableVertexAttribArray(aPosition)
    // 使用此方法禁用 gl.disableVertexAttribArray(aPosition)
    // gl.vertexAttrib2f(aPosition, 0.0, 0.0)

    const size = new Float32Array([
        10.0,
        20.0,
        30.0,
    ])
    const sizeBuffer = gl.createBuffer();

    gl.bindBuffer(gl.ARRAY_BUFFER, sizeBuffer);

    gl.bufferData(gl.ARRAY_BUFFER,size,gl.STATIC_DRAW);

    gl.vertexAttribPointer(aPointSize,1,gl.FLOAT,false,0,0);
    // aPointSize
    gl.enableVertexAttribArray(aPointSize)

    gl.drawArrays(gl.POINTS, 0, 3);

</script>
